Auth0での認証付きのPiping Serverを立てる
#Piping_Server #Auth0
やりたいこと
認証付きのPiping Serverを立ててデータ転送を出来る人に制限をかけたい。
認証はAuth0を使いたい。
Auth0はメールアドレスや以下のような様々な既存のアカウントで認証を用意できるサービス。
https://gyazo.com/2f2dfebd864785db5bbb2ba91cad6334
(Universal Login - SSO between multiple apps - Auth0)
任意のJavaScriptでRulesを書くことで認証・認可をカスタマイズすることも可能。
(Auth0のRulesを使って認証認可を自在にカスタマイズする | フューチャー技術ブログ)
Auth0は無料で7000人のアクティブユーザーまで使える。
できたもの
以下にauth0-piping-serverという新しいリポジトリを作った。
GitHub:
内部的にはオリジナルPiping Serverをライブラリとして利用している。そのためオリジナルのPiping Serverに手を加えておらず、シンプルさを保っている。
使い方
サーバーの立て方
nwtgck/auth0-piping-serverでDockerイメージを用意した。
Dockerで以下のようにして に Piping Server を立てられる。
code:bash
docker run -it -p 8080:8080 nwtgck/auth0-piping-server --jwks-uri https://nwtgck.us.auth0.com/.well-known/jwks.json --jwt-issuer=https://nwtgck.us.auth0.com/
(--jwt-audienceでaudienceも指定できる)
認証付きのPiping Server( )をブラウザで開くと以下のようにちゃんと認証が必要なことが分かる。
https://gyazo.com/6f8b21aeaae87fbc5b05410af86dd5c8
クライアントからのリクエスト
HTTPヘッダにAuthorization: Bearer <Auth0のJWT> をつけて (認証付きPiping Server)にリクエストすることで転送できる。
Webクライアントの実装例
以下がAuth0の認証を使ったシンプルなWebクライアントの例のデモ。
https://gyazo.com/38945cb6e24fbcb9d25805a18f2a2075
(SendとGetを同じWebクライアントでやっているのは例だから。離れた場所でもSend/Getできる。)
以下に上記のWebクライアントの全てのソースがある。
Auth0 JavaScript SDK Quickstarts: Loginをベースにしている。
ソース中にある以下の部分を自分のAuth0の設定に変更すると良い。
code:js
...
auth0Promise = createAuth0Client({
domain: "nwtgck.us.auth0.com",
client_id: "bsm7sR6J6RnXJZJAklDceLLf9zz0bqiX",
cacheLocation: 'localstorage',
// audience: '...'
});
...
上記はaudience: を指定していないため Authorization: Bearer <Auth0のJWT> に指定するJWTの文字列は(await auth0.getIdTokenClaims()).__rawで取得した。
(const auth0 = await auth0Promise;とする)
audience: を指定するとawait auth0.getTokenSilently()で取得した文字列を<Auth0のJWT>に指定できた。
上記のindex.htmlがある場所で以下のコマンドなどでWebクライアントを静的ホスティングして使える。
code:bash
# Static hosting
python3 -m http.server 3000
に上記のシンプルなWebクライアントが立ち上がる。
Auth0の設定は以下の「Allowed Callback URLs」、「Allowed Logout URLs」、「Allowed Web Origins」を変更している。
https://gyazo.com/fe505ebe287c1b436940c32bbfc24567
この に立てたWebクライアントはあくまでも一枚のHTMLで出来た例。
Webクライアントならfetch()やaxiosなどを使ってPiping Serverのクライアントの作ってそこに認証機能をつけたり、Piping UIをフォークして自分用のAuth0対応版を作ることもできると思う。
おまけ
リポジトリ名がauth0-piping-serverだがAuth0に限らずより汎用的なJWTでの認証の実装になっている。これはOpenID Connectなのかそれともそうでないのかなど、これの呼び名として適切な用語が見つかればリポジトリ名を変えようかなと考えている。
Rich Piping ServerにこのJWTを使った認証機能を搭載させる道もある。
公開されたPiping Serverを知っている人のみが使えるように限定公開する
関連: Basic認証付きのPiping Serverを立てる方法